<route lang="yaml">
meta:
  requiresAuth: true
</route>

<template>
  <el-form label-width="120px" size="mini" class="msgform">
    <el-form-item label="头像">
      <el-avatar
        :size="60"
        :src="imgurl + Usermsg.profile.avatar"
        @error="errorHandler"
        @click="showavatarform"
      >
        <img
          src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
        />
      </el-avatar>
    </el-form-item>
    <el-form-item label="昵称">
      <el-input v-model="updatemsg.profile.nickname"></el-input>
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="updatemsg.mobile"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="updatemsg.profile.gender">
        <el-radio label="MALE">男</el-radio>
        <el-radio label="FEMALE">女</el-radio>
        <el-radio label="UNKNOWN">保密</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="创建账户时间">
      <el-input v-model="Usermsg.profile.createdAt" disabled></el-input>
    </el-form-item>
    <el-form-item label="最后更新时间">
      <el-input v-model="Usermsg.profile.updatedAt" disabled></el-input>
    </el-form-item>
  </el-form>
  <el-button @click="msgupdate">上传</el-button>

  <!-- 上传图片的对话框表单 -->
  <el-dialog v-model="avatarFormVisible" title="上传头像">
    <div class="viewAvatar">
      <el-image :src="avatarUrl" class="viewimg"></el-image>
      <input
        type="file"
        id="avatar"
        name="avatar"
        accept="image/png, image/jpeg , image/jpg"
        ref="avatarimg"
        @change="viewavatar"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="avatarFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updatedAvatar">上传</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
  getUserProfile,
  User,
  changeavatar,
  updatedUserMsg,
  Usermsg as msg
} from '../../services/auth'
import { UserDateFormat } from '../../util'

const imgurl = 'http://159.75.101.15:3000/'
const Usermsg = ref<User>({
  id: '',
  mobile: '',
  roles: [],
  createdAt: '',
  updatedAt: '',
  profile: {
    id: '',
    createdAt: '',
    updatedAt: '',
    nickname: '',
    avatar: '',
    gender: ''
  }
})
onMounted(async () => {
  try {
    Usermsg.value = UserDateFormat((await getUserProfile()).data)
    updatemsg.value.mobile = Usermsg.value.mobile
    updatemsg.value.profile = Usermsg.value.profile
  } catch (err) {}
})

/**
 * 预览头像的实现
 */
const errorHandler = () => true
const avatarFormVisible = ref(false)
const avatarUrl = ref<any>(null)
const avatarimg = ref<any>(null)
function showavatarform() {
  avatarFormVisible.value = true
}
function viewavatar() {
  // console.log(avatarimg.value.files)
  var fr = new FileReader()
  fr.onload = function () {
    avatarUrl.value = fr.result
  }
  fr.readAsDataURL(avatarimg.value.files[0])
  //测试上传头像
}
/**
 * 上传头像
 */
async function updatedAvatar() {
  const formdata = new FormData()
  // console.log(avatarimg.value.files[0])
  const x = avatarimg.value.files[0]
  // console.log(x)
  formdata.append('file', x)
  Usermsg.value = (await changeavatar(formdata)).data
  avatarFormVisible.value = false
}

/**
 * 上传用户资料
 */
const updatemsg = ref<msg>({
  mobile: '',
  profile: {
    nickname: '',
    gender: ''
  }
})

async function msgupdate() {
  Usermsg.value = UserDateFormat((await updatedUserMsg(updatemsg.value)).data)
}
</script>

<style lang="less" scoped>
.msgform {
  .el-avatar {
    cursor: pointer;
  }
}
.viewAvatar {
  text-align: center;
  .viewimg {
    height: 200px;
    width: 200px;
    border-radius: 50%;
  }
  // file 类型的input 框样式的设置
  // #avatar{
  //   // opacity: 0;
  //   // width: 30px;
  // }
}
</style>
